<!-- 个人中心 -->
<template>
  <view class="container">
    <!-- 用户信息区域 -->
    <view class="user-info-section" v-if="userStore.isLogin">
      <view class="user-avatar">
        <image :src="userStore.info.avatar || '/static/img/shop/ic_user_avatar.png'" mode="aspectFill"></image>
      </view>
      <view class="user-info">
        <view class="user-name">{{ userStore.info.nickname || '用户' }}</view>
        <view class="user-id">ID: {{ userStore.info.id || '0' }}</view>
      </view>
    </view>
    
    <!-- 未登录提示 -->
    <view class="not-login-section" v-else @tap="goToLogin">
      <image src="/static/img/shop/ic_user_avatar.png" mode="aspectFill"></image>
      <text>点击登录</text>
      <image src="/static/img/shop/ic_arrow_right.png" mode="aspectFill"></image>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-group">
        <view class="menu-item" @tap="goToOrder">
          <image src="/static/img/shop/ic_order.png" mode="aspectFit"></image>
          <text>我的订单</text>
          <image src="/static/img/shop/ic_arrow_right.png" mode="aspectFit"></image>
        </view>
        <view class="menu-item" @tap="goToCollect">
          <image src="/static/img/shop/ic_collect.png" mode="aspectFit"></image>
          <text>我的收藏</text>
          <image src="/static/img/shop/ic_arrow_right.png" mode="aspectFit"></image>
        </view>
        <view class="menu-item" @tap="goToWallet">
          <image src="/static/img/shop/ic_wallet.png" mode="aspectFit"></image>
          <text>我的钱包</text>
          <image src="/static/img/shop/ic_arrow_right.png" mode="aspectFit"></image>
        </view>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <button class="logout-button" v-if="userStore.isLogin" @tap="goToLogout">退出登录</button>
  </view>
</template>

<script setup>
  import { onShow, onPullDownRefresh, computed } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  // 获取用户store
  const userStore = sheep.$store('user');

  // 跳转到登录页
  const goToLogin = () => {
    sheep.$router.go('/pages/index/login');
  };

  // 跳转到订单列表
  const goToOrder = () => {
    if (!userStore.isLogin) {
      goToLogin();
      return;
    }
    sheep.$router.go('/pages/order/list');
  };

  // 跳转到收藏列表
  const goToCollect = () => {
    if (!userStore.isLogin) {
      goToLogin();
      return;
    }
    sheep.$router.go('/pages/user/goods-collect');
  };

  // 跳转到钱包
  const goToWallet = () => {
    if (!userStore.isLogin) {
      goToLogin();
      return;
    }
    sheep.$router.go('/pages/user/wallet/money');
  };

  // 跳转到退出登录页面
  const goToLogout = () => {
    sheep.$router.go('/pages/user/logout');
  };

  // 生命周期钩子
  onShow(() => {
    userStore.updateUserData();
  });

  onPullDownRefresh(() => {
    userStore.updateUserData();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });
</script>

<style scoped>
  .container {
    padding: 20rpx;
    min-height: 100vh;
    background-color: #f7f7f7;
  }

  /* 用户信息区域 */
  .user-info-section {
    display: flex;
    align-items: center;
    padding: 40rpx 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
  }

  .user-avatar {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 30rpx;
  }

  .user-avatar image {
    width: 100%;
    height: 100%;
  }

  .user-info {
    flex: 1;
  }

  .user-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }

  .user-id {
    font-size: 28rpx;
    color: #999;
  }

  /* 未登录提示 */
  .not-login-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
  }

  .not-login-section image:first-child {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background-color: #f0f0f0;
  }

  .not-login-section text {
    font-size: 32rpx;
    color: #333;
  }

  .not-login-section image:last-child {
    width: 24rpx;
    height: 40rpx;
  }

  /* 功能菜单 */
  .menu-section {
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 40rpx;
  }

  .menu-group {
    padding: 0 30rpx;
  }

  .menu-item {
    display: flex;
    align-items: center;
    height: 120rpx;
    border-bottom: 1rpx solid #f0f0f0;
  }

  .menu-item:last-child {
    border-bottom: none;
  }

  .menu-item image:first-child {
    width: 40rpx;
    height: 40rpx;
    margin-right: 30rpx;
  }

  .menu-item text {
    flex: 1;
    font-size: 32rpx;
    color: #333;
  }

  .menu-item image:last-child {
    width: 24rpx;
    height: 40rpx;
  }

  /* 退出登录按钮 */
  .logout-button {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #fff;
    color: var(--ui-BG-Main);
    font-size: 32rpx;
    border-radius: 45rpx;
    margin-top: 30rpx;
  }
</style>
